// @ts-ignore
import IMGooGleMap from "@userList/components/GoogleMap.vue";
import { useDraggable } from "@vueuse/core";
import { CSSProperties } from "vue";
import {
  clickPointType,
  defaultModalFormState,
  defaultModalLoading,
  defaultModalVisible,
  drawerFormState,
  modal_disabled,
  randomClassName,
} from "../../store";
import { handleChange, handleSearch } from "../../utils";
import { mapListMap } from "../../dict";
export default () => {
  const modalTitleRef = ref<any>(null);
  const { x, y, isDragging } = useDraggable(modalTitleRef);
  const startX = ref<number>(0);
  const startY = ref<number>(0);
  const startedDrag = ref(false);
  const transformX = ref(0);
  const transformY = ref(0);
  const preTransformX = ref(0);
  const preTransformY = ref(0);
  const dragRect = ref({ left: 0, right: 0, top: 0, bottom: 0 });
  watch([x, y], () => {
    if (!startedDrag.value) {
      startX.value = x.value;
      startY.value = y.value;
      const bodyRect = document.body.getBoundingClientRect();
      const titleRect = modalTitleRef.value.getBoundingClientRect();
      dragRect.value.right = bodyRect.width - titleRect.width;
      dragRect.value.bottom = bodyRect.height - titleRect.height;
      preTransformX.value = transformX.value;
      preTransformY.value = transformY.value;
    }
    startedDrag.value = true;
  });
  watch(isDragging, () => {
    if (!isDragging) startedDrag.value = false;
  });

  watchEffect(() => {
    if (startedDrag.value) {
      transformX.value =
        preTransformX.value +
        Math.min(Math.max(dragRect.value.left, x.value), dragRect.value.right) -
        startX.value;
      transformY.value =
        preTransformY.value +
        Math.min(Math.max(dragRect.value.top, y.value), dragRect.value.bottom) -
        startY.value;
    }
  });
  const transformStyle = computed<CSSProperties>(() => {
    return {
      transform: `translate(${transformX.value}px, ${transformY.value}px)`,
    };
  });
  const defineModalConfig = {
    zIndex: 1002,
    modalInstance: ref(null),
    width: "800px",
    loading: defaultModalLoading[2],
    visible: defaultModalVisible[2],
    maskClosable: true,
    title: ref($t("table87")),
    destroyOnClose: true,
    disable_ok_button: modal_disabled,
    wrapStyle: { overflow: "hidden" },
    formState: defaultModalFormState[2],
    reverse: ref(true),
    slot: {
      modalSlot: {
        modalRender: ({ originVNode }: any) => {
          return (
            <>
              <div style={transformStyle.value}>{h(originVNode)}</div>
            </>
          );
        },
      },
      extra_form_item: () => {
        return (
          <>
            <a-col span={24}>
              <a-form-item
                label={$t("table100")}
                name="location"
                labelCol={{ span: 2 }}
                wrapperCol={{ span: 22 }}
              >
                <a-input
                  style="width: 300px"
                  vModel:value={defaultModalFormState[2].location}
                  placeholder={$t("placeholder52")}
                ></a-input>
              </a-form-item>
            </a-col>
            <a-col span={24}>
              <a-form-item
                name="searchKey"
                labelCol={{ span: 2 }}
                wrapperCol={{ span: 22 }}
                label={$t("table101")}
              >
                {withDirectiveInput({
                  vNode: (
                    <a-select
                      vModel:value={defaultModalFormState[2].searchKey}
                      showSearch={true}
                      placeholder={$t("placeholder53")}
                      style="width: 300px"
                      showArrow={true}
                      filterOption={false}
                      notFoundContent={null}
                      size="default"
                      options={mapListMap}
                      // onSearch={handleInput}
                      onChange={handleChange}
                      class={randomClassName}
                    >
                      {{
                        suffixIcon: () => (
                          <search-outlined onClick={handleSearch} />
                        ),
                      }}
                    </a-select>
                  ),
                })}
              </a-form-item>
            </a-col>
            <IMGooGleMap />
          </>
        );
      },
    },
    on: {
      finish(values: any) {
        const formState = defaultModalFormState[2];
        const loading = defaultModalLoading[2];
        loading.value = true;
        setTimeout(() => {
          if (clickPointType.value === 0) {
            drawerFormState.location = formState.location;
          }
          if (clickPointType.value === 1) {
            defaultModalFormState[1].location = formState.location;
            defaultModalFormState[1].content_position_country_code =
              formState.content_position_country_code;
          }
          loading.value = false;
          defaultModalVisible[2].value = false;
        }, 400);
      },
    },
    modalList: [],
  };
  return defineModalConfig;
};
